<template>
	<view class="dataquery" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="toptitle">
			<view class="title">
				<text style="margin: 0;">监测数据查询</text>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<image :src="screen" style="width:16px;height:19px;position: absolute;right: 30px;" @click="openPopup" />
				</view>
			</view>
			<view class="searchinput">
				<uni-icons type="search" size="20" style="display: flex;justify-content: center;align-items: center;color: #fff;"
				 color="#fff"></uni-icons>
				<input class="uni-input" confirm-type="search" placeholder="搜索监测点" @blur="inputsearch" v-model="inputsearchval"
				 type="text" style="font-size: 12px;text-align: center;color: #fff;" />
			</view>
		</view>

		<scroll-view style="margin-top: 140px;height: 84%;" class="scroll-Y" scroll-y="true" @scrolltolower="loadingMore">
			<uni-popup ref="popup" type="top" class="popup" style="background-color: #fff;box-sizing: border-box;padding: 0;margin: 0;">
				<view class="titlelist" style="background-color: #fff;">
					<view style="border-bottom:1px solid #ccc;">
						<view class="select" @click="openseclect1">
							<text v-text="pleseSelect1"></text>
						</view>
						<view class="select1" v-if="openselect1">
							<view class="SelectName" v-for="item in titlelist" :key="item.stationID" :class="{active:item.stationID==isActive}"
							 @click="checktitle(item.stationID,item.stationName)">{{ item.stationName }}</view>
						</view>
					</view>
					<view style="border-bottom:1px solid #ccc;">
						<view class="select" @click="openseclect2">
							<text v-text="pleseSelect2"></text>
						</view>
						<scroll-view class="subSelectName scroll-Y" scroll-y="true" v-if="openselect2">
							<text class="monitoringPositionName" :class="{active:item.monitoringPositionID==IsActive}" v-for="item in subDate"
							 :key="item.monitoringPositionID" @click="selectsubName(item.monitoringPositionName,item.monitoringPositionID)">{{item.monitoringPositionName}}</text>
						</scroll-view>
					</view>
					<view class="submit">
						<text class="submitBtn" style="color:#fff;background:#009FF1" @click="submitToInfo">确定</text>
						<text class="submitBtn" style="color:#fff;background:#BFBFBF" @click="closePopup">取消</text>
					</view>
				</view>
			</uni-popup>

			<view class="warninglist" v-for="(item) in list" :key="item.monitoringPositionID">
				<view class="dianweiIcon">
					<view class="dianweiImg" />
					<text class="listtitle">{{ item.monitoringPositionName }}</text>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<text class="level">预警级别：{{ item.importance }}</text>
					<text style="color:#009ff1;font-size:14px;font-weight: bold;" @click="toDataQueryDetail(item.monitoringPositionID)">详情</text>
				</view>
				<text class="reason">预警原因：{{ item.comments }}</text>
				<text class="time">时间：{{ item.time }}</text>

			</view>
			<text class="loading" v-if="loading">{{ Text1 }}</text>
		</scroll-view>

	</view>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
	import uniIcons from "@/components/uni-icons/uni-icons";
	import uniPopup from "@/components/uni-popup/uni-popup";
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				Text1: "加载中...",
				Text: "没有数据了！",
				dianweiImg: require("../../../static/image/navbg.png"),
				titlecode: "",
				titlelist: [],
				subDate: [],
				pleseSelect1: "请选择寨子",
				pleseSelect2: "请选择点位",
				stationID: "",
				monitoringPositionid: "",
				isActive: "48",
				IsActive: "",
				list: [],
				listinfo: [],
				screen: require("../../../static/image/icon_screen.png"),
				inputsearchval: "",
				stationid: "",
				params: {
					monitoringPositionName: "string"
				},
				parm: {
					page: 1,
					size: 20,
					monitoringPositionID: ""
				},
				loading: false,
				openselect1: true,
				openselect2: false
			};
		},
		components: {
			uniIcons,
			uniPopup,
			uniCollapse,
			uniCollapseItem
		},
		methods: {
			onShow: function() {
				this.getAllDataQueryList();
				this.gettitlelist();
				this.getStationName();
			},
			onLoad: function(option) {
				let _this = this;
				console.log(option.monitoringPositionID);
				this.parm.monitoringPositionID = option.monitoringPositionID;
				ajax({
					url: "/monitoringPosition/getMonitoringPositionInfo",
					method: "POST",
					data: _this.parm,
					success: res => {
						_this.list = res.data.data;
						console.log(res.data);
					}
				});
			},
			toDataQueryDetail(MPId) {
				console.log(MPId);
				uni.navigateTo({
					url: "../../index/dataquerydetail/dataquerydetail?monitoringPositionID=" +
						MPId
				});
			},
			toscreen() {
				uni.navigateTo({
					url: "../../index/dataqueryscreen/dataqueryscreen"
				});
			},
			inputsearch() {
				let searchval = this.inputsearchval;
				let _this = this;
				_this.params.monitoringPositionName = searchval;
				ajax({
					url: "/monitoringPosition/findList",
					method: "POST",
					data: _this.params,
					success: res => {
						console.log(res);
						let date = res.data.data;
						_this.list = date;
					}
				});
				if (this.inputsearchval == "") {
					ajax({
						url: "/monitoringPosition/findList",
						method: "POST",
						data: {},
						success: res => {
							console.log(res);
							let date = res.data.data;
							_this.list = date;
						}
					});
				}
			},
			openPopup() {
				this.$refs.popup.open();
				this.gettitlelist();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			getStationName() {
				let _this = this;
				ajax({
					url: "/monitoringPosition/getMonitoringPositionByStationID?stationID=" +
						_this.isActive,
					method: "POST",
					success: res => {
						_this.subDate = res.data.data;
						// console.log(res.data.data);
					}
				});
			},
			gettitlelist() {
				let _this = this;
				ajax({
					url: "/station/findList",
					method: "POST",
					data: {},
					success: res => {
						let date = res.data.data.filter(item => {
							return item.parentStationID == 0;
						});
						_this.titlelist = date;
					}
				});
			},
			submitToInfo() {
				let _this = this;
				console.log(_this.monitoringPositionid);
				uni.navigateTo({
					url: "../../index/dataquery/dataquery?monitoringPositionID=" +
						_this.monitoringPositionid
				});
			},
			checktitle(stationid, stationname) {
				console.log(stationid, stationname);
				this.pleseSelect1 = stationname;
				this.isActive = stationid;
				this.getStationName();
			},
			selectsubName(monitoringPositionName, monitoringPositionID) {
				this.IsActive = monitoringPositionID;
				this.monitoringPositionid = monitoringPositionID;
				this.pleseSelect2 = monitoringPositionName;
			},
			getAllDataQueryList() {
				let _this = this
				ajax({
					url: "/monitoringPosition/findList",
					method: "POST",
					data: _this.parm,
					success: res => {
						console.log(res);
						_this.list = res.data.data;
					}
				});
			},
			loadingMore() {
				this.loading = true;
				let _this = this
				_this.parm.page += 1;
				let loadingTime = setTimeout(function() {
					_this.loading = false
					if (_this.list.length < '20') {
						_this.Text1 = _this.Text;
					} else {
						_this.getAllDataQueryList()
					}
				}, 2000)
			},
			openseclect1() {
				this.openselect1 = !this.openselect1
				if (this.openselect1 == true) {
					this.openselect2 = false
				}
			},
			openseclect2() {
				this.openselect2 = !this.openselect2
				if (this.openselect2 == true) {
					this.openselect1 = false
				}
			}
		},
		mounted() {
			let _this = this;
			this.getAllDataQueryList();
			this.gettitlelist();
			this.getStationName();
		},
		onPullDownRefresh() {
			this.parm = {
				page: 1,
				size: 20,
				monitoringPositionID: ""
			}
			this.getAllDataQueryList();
			if (timer != null) {
				clearTimeout(timer);
			}
			let timer = setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			// let _this=this
			// this.parm.page+=1;
			// this.getAllDataQueryList()
		}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.dataquery {
		height: 100%;
	}

	.title {
		font-size: 16px;
		height: 51px;
		box-sizing: border-box;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.toptitle {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		position: fixed;
		top: 0;
		left: 0;
	}

	.dianweiIcon {
		display: flex;
		align-items: center;
	}

	.dianweiImg {
		width: 16px;
		height: 15px;
		margin-right: 5px;
		background: url(../../../static/image/query_icon.png) no-repeat center;
		background-size: contain;
	}

	.searchinput {
		display: flex;
		align-items: center;
		justify-content: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 22px;
		border: 1px solid #ccc;
		border-radius: 50px;
		margin: 8px auto;
		width: 80%;
		color: #fff;
		/* background-color: #fff; */
	}

	.warninglist_title {
		padding: 6px 25px;
		font-size: 14px;
		color: #009ff1;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.warninglist {
		/* background-color: #fff; */
		border: 1px solid #ccc;
		margin: 0 10px 9px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		padding: 6px 25px;
		line-height: 24px;
		box-shadow: 0px 2px 5px #f1f1f1;
	}

	.listtitle {
		font-size: 12px;
		color: #009ff1;
		font-weight: bold;
	}

	.time,
	.level,
	.reason,
	.source {
		font-size: 12px;
		color: #fff;
	}

	.reason {
		width: 300px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.active {
		color: #009ff1;
		background-color: #ccecfc;
	}

	.SelectName {
		border-radius: 5px;
		font-size: 12px;
		padding: 7px 14px;
		/* text-indent: 20px; */
		margin: 7px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.subSelectName {
		border-radius: 10rpx;
		font-size: 24rpx;
		height: 520rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
	}

	text {
		margin: 10rpx 0;
	}

	.monitoringPositionName {
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		margin: 0px 15px;
		padding: 7px 14px;
		box-sizing: border-box;
	}

	.submit {
		display: flex;
		justify-content: space-around;
		width: 100%;
		position: absolute;
		bottom: 40rpx;
	}

	.submitBtn {
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		padding: 24rpx 84rpx;
	}

	.select {
		display: flex;
		align-items: center;
		color: #000;
		font-size: 28rpx;
		box-sizing: border-box;
		margin: 10rpx 30rpx;
	}

	.select1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		color: #000;
		padding: 0;
		width: 100%;
	}

	.popup {
		width: 100%;
		box-sizing: border-box;
	}

	.popup>>>.uni-popup__mask {
		background: none !important;
	}

	.popup>>>.uni-popup__wrapper-box {
		height: 600px !important;
		text-align: left;
		padding: 0px !important;
	}

	.loading {
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 40rpx;
	}
</style>
